<template>
  <span :class="[`z-tag z-tag--${type} z-tag--${size}`,{
    'z-tag--round':round
  }]">
    <slot></slot>
  </span>
</template>

<script>
export default {
  name: 'ZTag',
  props: {
    type: {
      type: String,
      default: 'gray'
    },
    size: {
      type: String,
      default: 'small'
    },
    round: Boolean
  }
}
</script>

<style lang="scss" scoped>
.z-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
  &--gray {
    background-color: #f0f0f0;
    color: #7f7f7f;
  }
  &--blue {
    background-color: #0050b3;
    color: #ffffff;
  }
  &--sky {
    background-color: #f4f4f4;
    color: #125bc0;
  }
  &--green {
    color: #17b3a3;
    background: #e8f7f6;
  }
  &--yellow {
    background-color: #ffe7ba;
    color: #fbab02;
  }
  &--disabled {
    background-color: #0050b3;
    color: #ffffff;
  }
  &--custom {
    background-color: #ffe7baff;
    color: #FBAB02FF;
  }
  &--template {
    background-color: #EEF5DCFF;
    color: #8BBB11FF;
  }
  &--internal {
    background-color: #E6F7FFFF;
    color: #138DC7FF;
  }
  &--system {
    background-color: #FFF1F0;
    color: #FF4D4F;
  }
  &--small {
    padding: 0 8px;
    height: 24px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
  &--mini {
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 400;
  }
  &--round {
    border-radius: 14px;
    .z-tag--mini {
      border-radius: 24px;
    }
  }
}
</style>
